<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html,
        body{
            height:100%;
            width:100%;
            overflow:hidden;
            background-color:black;
        }
    </style>
    <script src="./js/animate.tools.js"></script>
</head>
<body>
<script>

    function BiuBiu(){
        this.ele = null;
        this.init = function(x, y){
            this.ele = document.createElement("div");
            document.body.appendChild(this.ele);
            this.ele.style.width = "5px";
            this.ele.style.height = "10px";
            this.ele.style.left = x + "px";
            this.ele.style.top = document.documentElement.offsetHeight + "px";
            this.ele.style.backgroundColor = this.randomColor();
            this.ele.style.position = "absolute";

            return this;

        };

        this.randomColor = function(){
            var r = parseInt(Math.random() * 256);
            var g = parseInt(Math.random() * 256);
            var b = parseInt(Math.random() * 256);
            return `rgb(${r},${g},${b})`
        }
    }

    function Boom(){
        this.ele = null;
        this.init = function(x, y){
            this.ele = document.createElement("div");
            document.body.appendChild(this.ele);
            this.ele.style.width = "5px";
            this.ele.style.height = "5px";
            this.ele.style.left = x + "px";
            this.ele.style.top = y + "px";
            this.ele.style.backgroundColor = this.randomColor();
            this.ele.style.position = "absolute";
            return this;
        }
        this.randomColor = function(){
            var r = parseInt(Math.random() * 256);
            var g = parseInt(Math.random() * 256);
            var b = parseInt(Math.random() * 256);
            return `rgb(${r},${g},${b})`
        }
    }

    document.body.onclick = function(evt){
        var e = evt || window.event;
        var disX = e.clientX;
        var disY = e.clientY;
        var biu = new BiuBiu().init(disX, disY);
        tools.animate(biu.ele, {
            top : disY
        }, function(){
            biu.ele.remove()
            var r = 50 + Math.random() * 50;
            var deg = 0;
            for(var i = 0; i < 20; i++){
                deg += 18;
                var boom = new Boom().init(disX, disY);
                // X坐标=a + Math.sin(角度 * (Math.PI / 180)) * r ；
                // Y坐标=b + Math.cos(角数 * (Math.PI / 180)) * r ；
                var mX = disX + Math.sin(deg * (Math.PI / 180)) * r;
                var mY = disY + Math.cos(deg * (Math.PI / 180)) * r;
                tools.animate(boom.ele, {left : mX, top : mY}, function(o){
                    o.remove()
                })
            }
        })
    }
</script>
</body>
</html>